<template>
	<view class="order-detail-container">
		<view class="section order-info">
			<text class="title">订单信息</text>
			<view class="info-item">
				<text class="label">订单号:</text>
				<text class="value">{{ order.id }}</text>
			</view>
			<view class="info-item">
				<text class="label">状态:</text>
				<text class="status">{{ getStatusText(order.status) }}</text>
			</view>
			<view class="info-item">
				<text class="label">总金额:</text>
				<text class="value price">{{ order.payPrice / 100 }}元</text>
			</view>
			<view class="info-item">
				<text class="label">创建时间:</text>
				<text class="value">{{ formatTime(order.createTime) }}</text>
			</view>
			<view class="info-item">
				<text class="label">用户备注:</text>
				<text class="value">{{ order.userRemark || '无' }}</text>
			</view>
			<view class="info-item">
				<text class="label">商家备注:</text>
				<text class="value">{{ order.remark || '无' }}</text>
			</view>
		</view>

		<view class="section receiver-info">
			<text class="title">收货信息</text>
			<view class="info-item">
				<text class="label">收货人:</text>
				<text class="value">{{ order.receiverName }}</text>
			</view>
			<view class="info-item">
				<text class="label">联系电话:</text>
				<text class="value">{{ order.receiverMobile }}</text>
			</view>
			<view class="info-item">
				<text class="label">收货地址:</text>
				<text class="value address">{{ order.receiverDetailAddress }}</text>
			</view>
		</view>

		<view class="section order-items">
			<text class="title">商品清单</text>
			<view v-for="item in order.items" :key="item.id" class="item">
				<image :src="item.picUrl" mode="aspectFill" class="item-image"></image>
				<view class="item-info">
					<text class="item-name">{{ item.spuName }}</text>
					<view class="item-details">
						<text>数量: {{ item.count }}</text>
						<text>单价: {{ item.price / 100 }}元</text>
						<text>状态: {{ getStatusText(item.status) }}</text>
					</view>
					<view class="item-properties">
						<text v-for="prop in item.properties" :key="prop.propertyId"> {{ prop.propertyName }}: {{ prop.valueName }} </text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="order.status == 10">
			<u-button type="primary" @click="delivery(order.id)">发货</u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import httpUrl from '@/config';

import { useOrderStore } from '@/store/modules/order';

// 数据定义
let useStore = useOrderStore();
const order = ref(null);
const tenantId = uni.getStorageSync('tenantId');
const accessToken = uni.getStorageSync('refreshToken');
///trade/order/delivery
//const { orderList, removeOrder } = useOrderWebSocket();
let delivery = (id) => {
	uni.request({
		url: httpUrl.baseUrl + '/trade/order/delivery',
		header: {
			Accept: '*/*',
			'Tenant-Id': tenantId,
			Authorization: `Bearer ${accessToken}`,
		},
		data: {
			id: id,
			logisticsId: 0,
			logisticsNo: '',
		},
		method: 'PUT',

		success: (res) => {
			console.log('res>>> >', res);
			if (res.data.code === 0) {
				useStore.removeOrder(id);
				setTimeout(() => {
					//loading.value = false;
					uni.showToast({
						title: '发货成功',
						icon: 'success',
					});
					uni.navigateBack({
						url: 'pages/index/index',
					});
				}, 1000);
			} else {
				console.log('请求失败:', res.data);
			}
		},
		fail: (err) => {
			console.error('请求失败:', err);
		},
	});
};
onLoad((options) => {
	if (options.orderData) {
		order.value = JSON.parse(decodeURIComponent(options.orderData));
	}
});

// 根据状态码返回状态文本
const getStatusText = (status) => {
	switch (status) {
		case 10:
			return '已支付';
		case 20:
			return '已发货';
		default:
			return '未知状态';
	}
};

// 格式化时间戳
const formatTime = (timestamp) => {
	const date = new Date(timestamp);
	return date.toLocaleString();
};
</script>

<style scoped>
/* 全局样式 */
.order-detail-container {
	padding: 20px;
	background-color: #f9fafb;
	font-family: Arial, sans-serif;
}

/* 每个部分的通用样式 */
.section {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	padding: 15px;
}

.title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.label {
	font-weight: bold;
	color: #666;
	width: 70px;
}

.value {
	flex: 1;
	color: #333;
}

.status {
	color: #28a745; /* 绿色表示正常状态 */
	background-color: antiquewhite;
}

.price {
	color: #e74c3c; /* 红色表示价格 */
}

.address {
	word-break: break-all;
}

/* 商品清单样式 */
.item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	padding: 10px;
	background-color: #f9fafb;
	border-radius: 5px;
}

.item-image {
	width: 80px;
	height: 80px;
	margin-right: 15px;
	border-radius: 5px;
}

.item-info {
	flex: 1;
}

.item-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.item-details {
	margin-bottom: 5px;
	color: #666;
}

.item-properties text {
	display: block;
	font-size: 14px;
	color: #666;
	margin-bottom: 3px;
}
</style>
